<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>游玩</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
		<style type="text/css">
			.content-block{
				margin: 0;
				padding: 0;
			}
		</style>
  </head>
  <body>
    <div class="page-group">
        <div class="page page-current">
        	<header class="bar bar-nav">
					  <a class="button button-link button-nav pull-left back" >
					  	<span class="icon icon-left"></span>
					    返回
					  </a>
					  <!--<a class="button-link pull-right open-panel" href="setting.html">
	            <span class="icon icon-settings"></span>
	          </a>-->
					  <h1 class="title">周游</h1>
					</header>
				
	        <div class="bar bar-header-secondary">
					  <div class="searchbar">
					    <a class="searchbar-cancel">取消</a>
					    <div class="search-input">
					      <label class="icon icon-search" for="search"></label>
					      <input type="search" id='search' placeholder='输入关键字...'/>
					    </div>
					  </div>
					</div>
					
					<div class="content pull-to-refresh-content" data-ptr-distance="105">
				    <!-- 默认的下拉刷新层 -->
				    <div class="pull-to-refresh-layer">
				        <div class="preloader"></div>
				        <div class="pull-to-refresh-arrow"></div>
				    </div>
				    
				    <div class="buttons-tab">
					    <a href="#tab1" class="tab-link active button">全部</a>
					    <a href="#tab2" class="tab-link button">境内游</a>
					    <a href="#tab3" class="tab-link button">境外游</a>
					  </div>
					  
					  <div class="content-block">
					    <div class="tabs">
					      <div id="tab1" class="tab active" >
					        <div class="content-block " >
					          <div class="card-container">
								        <div class="card">
								            <div class="card-header">card</div>
								            <div class="card-content">
								                <div class="card-content-inner">
								                    这里是第1个card，下拉刷新会出现第2个card。
								                </div>
								            </div>
								        </div>
								    </div>
					        </div>
					      </div>
					      
					      
					      
					      
					      <div id="tab2" class="tab">
					        <div class="content-block">
					          
					          <div class="card-container">
								        <div class="card">
											    <div class="card-header">白水寨</div>
											    <div class="card-content">
											      <div class="list-block media-list">
											        <ul>
											          <li class="item-content">
											            <div class="item-media">
											              <img src="../img/dfe.jpg" width="44">
											            </div>
											            <div class="item-inner">
											              <div class="item-title-row">
											                <div class="item-title">白水寨风景区</div>
											              </div>
											              <div class="item-subtitle">白水寨风景名胜区位于增城区派潭镇，面积约170㎞²，北回归线穿越其中，被誉为北回归线上的瑰丽翡翠，属山岳型风景名胜区。</div>
											            </div>
											          </li>
											        </ul>
											      </div>
											    </div>
											    <div class="card-footer">
											      <span>2015/01/15</span>
											      <span>5 评论</span>
											    </div>
										  </div>
								    </div>
					          
					          
					        </div>
					      </div>
					      <div id="tab3" class="tab">
					        <div class="content-block">
					          <div class="card-container">
					          	<div class="card">
										    <div class="card-header">江南</div>
										    <div class="card-content">
										      <div class="list-block media-list">
										        <ul>
										          <li class="item-content">
										            <div class="item-media">
										              <img src="../img/dfd.jpg" width="44">
										            </div>
										            <div class="item-inner">
										              <div class="item-title-row">
										                <div class="item-title">烟雨江南</div>
										              </div>
										              <div class="item-subtitle">江南可采莲，莲叶何田田。鱼戏莲叶间。鱼戏莲叶东，鱼戏莲叶西，鱼戏莲叶南，鱼戏莲叶北。</div>
										            </div>
										          </li>
										        </ul>
										      </div>
										    </div>
										    <div class="card-footer">
										      <span>2015/01/15</span>
										      <span>5 评论</span>
										    </div>
										  </div>
					          </div>
					        </div>
					      </div>
					    </div>
					  </div>
					
					</div> 

					
    </div>

    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
		<script type="text/javascript">
			$.init();
			$(document).on("pageInit", function() {
	    	$('.buttons-tab').fixedTab({offset:44});
	   	});
		</script>
		<script type="text/javascript">
			$(document).on('refresh', '.pull-to-refresh-content',function(e) {
		    // 模拟2s的加载过程
		    setTimeout(function() {
		        var cardNumber = $(e.target).find('.card').length + 1;
		        var cardHTML = '<div class="card">' +
		                '<div class="card-header">card'+cardNumber+'</div>' +
		                '<div class="card-content">' +
		                  '<div class="card-content-inner">' +
		                      '这里是第' + cardNumber + '个card，下拉刷新会出现第' + (cardNumber + 1) + '个card。' +
		                  '</div>' +
		                '</div>' +
		            '</div>';
		
		        $(e.target).find('#tab1 .card-container').prepend(cardHTML);
		        // 加载完毕需要重置
		        $.pullToRefreshDone('.pull-to-refresh-content');
		    }, 2000);
			});
		</script>
  </body>
</html>